<template>
  <div class="about">
    <h1>This is an Pay page</h1>
    <div class="unit">
      <ul>
        <li v-for="(item, index) in series" :key="index">{{ item }}</li>
      </ul>
    </div>
    <svg class="svg" id="svg">
      <line x1="0" y1="50" x2="600" y2="50" class="line"/>
      <line x1="600" y1="50" x2="600" y2="650" class="line"/>
    </svg>
    <svg id="anim" width="250" height="600"></svg>
  </div>
</template>

<script lang="ts">
  import { Component, Vue } from 'vue-property-decorator'
  import service from '@/service'
  import client from '@/service/bus'
  import bus from "@/service/bus"
  import _ from 'lodash'
  import * as d3 from 'd3'

  @Component
  export default class Home extends Vue {
    value: number[] = []
    series: string[] = []
    circle: any = null

    reset() {
      this.circle = d3.select("#anim").append("circle")
        .attr("cx", 50)  //初始位置
        .attr("cy", 50)
        .attr("r", 50)  //初始半径
        .style("fill","green")
    }

    mounted() {
      const $svg = d3.select("#svg"), $anim = d3.select("#anim")
      setTimeout(() => {
        service.test({ a: '3433' }).then((res) => {
          console.log('#res', res)
          // @ts-ignore
          this.series = res.data.series

          $svg.selectAll("rect")
            // @ts-ignore
            .data(res.data.ret)
            .enter()
            .append("rect")
            // @ts-ignore
            .attr("height", function(d: number, i: number) {
              return (d / 10)
            })
            .attr("width","30")
            .attr("x", function(d: number, i: number) {return (i * 50)})
            .attr("y", 51)
        })

        $anim.append('g')
          .append("rect")
          .attr("x", 120)
          .attr("y", 20)
          .attr("rx", 2)
          .attr("ry", 2)
          .attr("width", 50)
          .attr("height", 30)
          .attr("style", "fill: red;stroke: #333333;stroke-width: 1;opacity: .8;cursor: pointer")
          .on("click", () => {
            this.reset()
            this.circle.transition()
              .duration(2000)  //变化时间是2s
              .ease(d3["easeBounce"])  //变换之后跳动
              .attr("cy", 300) //变换之后移动到x坐标为300
              .style("fill","#dddddd") //变换之后为红色
              .attr("r", 20)
              .remove()
          })
          .append("text")
          .text("replay")
          .attr('fill','white')
          .attr('x', 20)
          .attr('y', 20)
          .attr('text-anchor', 'middle')
          .style('font-size', '20px')
          .attr('dy', 8)
      }, 1000)

      bus.on('client.d3.test', _.throttle(data => {
        try {
          this.value = data.data.ret

          $svg.selectAll("rect")
            .data(data.data.ret)
            // @ts-ignore
            .attr("height", function(d: number, i: number) {return (d / 10)})
            .attr("x", function(d: number, i: number) {return (i * 50)})
        } catch (err) {
          console.error(err)
        }
      }, 300))

    }

  }
</script>

<style lang="scss" scoped>
  .unit {
    position: relative;
    top: 50px;
    ul {
      list-style: none;
      display: flex;
      padding: 0;
      margin: 0;
      margin-bottom: 5px;
      li {
        display: inline-block;
        margin-right: 20px;
        font-size: 12px;
        width: 30px;
        font-family: "Roboto Light";
        font-weight: 400;
        color: #333333;
        text-align: center;
      }
    }
  }
</style>

<style lang="scss">
  .svg {
    height: 600px;
    width: 650px;
    rect {
      fill: #1890ff;
      stroke: #666666;
      stroke-width: 1;
      transition: height 100ms linear;
    }
    .line {
      stroke: #333333;
      stroke-width: 2
    }
  }
</style>
